import { Table, Tag, Button, message, Space } from 'antd'
import { useQuery, gql, useMutation } from "@apollo/client"
import { useStore } from '@/store'
const GET_RESERVATIONS = gql`
query GetReservation($phone: String) {
  getReservation(phone: $phone) {
    id
    arrivalTime
    arrivalDate
    tableSize
    name
    phone
    status
    createdAt
  }
}
`
const UPDATE_RESERVATION = gql`
mutation UpdateReservation($reservationId: ID!, $status: Int!) {
  updateReservation(reservationId: $reservationId, status: $status) {
    id
  }
}
`
const DELETE_RESERVATION = gql`
mutation DeleteReservation($reservationId: ID!) {
  deleteReservation(reservationId: $reservationId) {
    id
  }
}
`


let getReservation = []
function User (params) {
  const { loading, error, data, refetch } = useQuery(GET_RESERVATIONS)
  const [updateTodo, { error: mutationError }] = useMutation(UPDATE_RESERVATION)
  const [deleteTodo, { error: deleteError }] = useMutation(DELETE_RESERVATION)
  const { userStore } = useStore()
  const { type } = userStore.userInfo
  if (error) message.error(error.message)
  if (deleteError) message.error(deleteError.message)
  if (mutationError) message.error(mutationError.message)
  data && (getReservation = data.getReservation)
  const onCancelClick = async (id, status) => {
    await updateTodo({
      variables: {
        "status": status === 0 ? 1 : 0,
        "reservationId": id
      }
    })
    refetch()
  }
  const onDeleteClick = async (id) => {
    await deleteTodo({
      variables: {
        "reservationId": id
      }
    })
    refetch()
  }
  const onConfirmClick = async (id) => {
    await updateTodo({
      variables: {
        "status": 1,
        "reservationId": id
      }
    })
    refetch()
  }
  const getTagColor = (status) => {
    switch (status) {
      case 0:
        return 'error'
      case 1:
        return 'success'
      case 2:
        return 'warning'
      default:
        return 'error'
    }
  }
  const getLabel = (status) => {
    switch (status) {
      case 0:
        return '已取消'
      case 1:
        return '预订成功'
      case 2:
        return '待确认'
      default:
        return '待确认'
    }
  }
  const columns = [
    {
      title: '预定人',
      dataIndex: 'name',
      key: 'key'
    },
    {
      title: '预定电话',
      dataIndex: 'phone',
      key: 'key',
    },
    {
      title: '预定日期',
      dataIndex: 'arrivalDate',
      key: 'key',
    },
    {
      title: '预定时间',
      dataIndex: 'arrivalTime',
      key: 'key',
    },
    {
      title: '用餐人数',
      dataIndex: 'tableSize',
      key: 'key',
    },
    {
      title: '预定状态',
      dataIndex: 'status',
      key: 'key',
      render: (_, { status, index }) => (
        <>
          <Tag key={index + 'Tag'} color={getTagColor(status)}> {getLabel(status)} </Tag>
        </>
      ),
    },
    {
      title: '预定时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, { id, status }) => {
        return (
          <Space>
            {(status === 2 && type === 'admin') ? <Button style={{ backgroundColor: '#67C23A' }} size='small' type='primary' onClick={() => onConfirmClick(id, status)}>确认</Button> : null}
            {status > 0 && <Button style={{ backgroundColor: '#909399' }} size='small' type='primary' onClick={() => onCancelClick(id, status)}>取消</Button>}
            {status === 0 && <Button size='small' type='primary' onClick={() => onDeleteClick(id, status)} danger>删除</Button>}
          </Space>
        )
      }
    },
  ]

  return (
    <div  >
      <Table loading={loading} columns={columns} dataSource={getReservation.map((n, index) => ({ ...n, key: index + 'user_table' }))} />
    </div>
  )
}
export default User